<?php

	include("common.php");
	
	$result = mysql_query("SELECT * FROM `197_albums` WHERE `album_id` = " . $_GET['album_id']);
	$album = mysql_fetch_assoc($result);
	
	$result = mysql_query("SELECT * FROM `197_images` WHERE `album_id` = " . $_GET['album_id']);
	$images = array();
	$image_block = array();
	$i = 0;
	while($row = mysql_fetch_assoc($result)){
		if($i == 4){
			$i = 0;
			array_push($images, $image_block);
			$image_block = array();
		}
		array_push($image_block, $row);
		$i++;
	}
	if($i != 0){
		array_push($images, $image_block);
	}
	
?>
<?php include("header.php"); ?>
<h1>相簿 - <?php echo $album['title']; ?></h1>
	<p style="text-align: center;"><button class="prev custom">&laquo;</button><button class="custom" onclick="location.replace('albumFind.php');">返回</button><button class="next custom">&raquo;</button></p>
<?php if(empty($images)){ ?>
	<p>目前沒有相片。</p>
<?php } else { ?>
	<script type="text/javascript" src="../jquery/js/jquery.tools.min.js"></script>
	<link rel="stylesheet" href="../jquery/css/apple-overlay.css" />
	<script type="text/javascript">
		function editImage(title, id){
			$("#description-edit-" + id).fadeOut(250, function(){ $("#description-edit-" + id).html("<img src='../images/ajax-loader.gif' />"); $("#description-edit-" + id).fadeIn(250, function(){ $.post("imageEdit.php", { "title": title, "image_id": id }, function(r){ $("#description-edit-" + id).html(r); setTimeout(function(){ location.reload(); }, 1000); }); });});
		}
	</script>
	<link rel="stylesheet" href="../jquery/css/scrollable.css" />
	<link rel="stylesheet" href="../jquery/css/scrollable-navigator.css" />
	<div class="navi" style="width: 100px; margin: 0 auto;"></div>
	<div class="apple scrollable">
		<div class="items">
			<?php foreach($images as $image_block){ ?>
				<div>
					<?php foreach($image_block as $row){ ?>
						<img src="../imageResize.php?width=225&filename=files/<?php echo $album['dir_name']; ?>/<?php echo $row['filename']; ?>" rel="#image-<?php echo $row['image_id']; ?>" />
					<?php } ?>
				</div>
			<?php } ?>
		</div>
	</div>
	<p style="text-align: center;"><button class="prev custom">&laquo;</button><button class="custom" onclick="location.replace('albumFind.php');">返回</button><button class="next custom">&raquo;</button></p>
	<?php foreach($images as $image_block){ ?>
		<?php foreach($image_block as $row){ ?>
			<div class="apple_overlay" id="image-<?php echo $row['image_id']; ?>">
				<a href="../files/<?php echo $album['dir_name']; ?>/<?php echo $row['filename']; ?>" target="_blank"><img style="border: 0;" src="../imageResize.php?height=400&filename=files/<?php echo $album['dir_name']; ?>/<?php echo $row['filename']; ?>" /></a>
				<div class="details">
					<p id="description-<?php echo $row['image_id']; ?>">
						<?php print(!empty($row['title']) ? $row['title'] : "本相片沒有描述。"); ?><br /><br />
						<button class="custom" onclick="$('#description-<?php echo $row['image_id']; ?>').fadeOut(250, function(){ $('#description-edit-<?php echo $row['image_id']; ?>').fadeIn(250); });">編輯</button>
					</p>
					<div style="display: none;" id="description-edit-<?php echo $row['image_id']; ?>">
						<form action="#" onsubmit="editImage($('#description-field-<?php echo $row['image_id']; ?>').val(), <?php echo $row['image_id']; ?>); return false;" method="POST">
							<p><label>描述：<input type="text" id="description-field-<?php echo $row['image_id']; ?>" size="50" value="<?php echo $row['title']; ?>" /></label><button class="custom" onclick="$('#description-edit-<?php echo $row['image_id']; ?>').submit();">送出</button></p>
						</form>
						<button class="custom" onclick="$('#description-edit-<?php echo $row['image_id']; ?>').fadeOut(250, function(){ $('#description-<?php echo $row['image_id']; ?>').fadeIn(250); });">關閉</button>
					</div>
				</div>
			</div>
		<?php } ?>
	<?php } ?>
	<script type="text/javascript">
			$(".apple img[rel]").overlay({effect: 'apple'});
			$(".scrollable").scrollable().navigator();
	</script>

<?php } ?>
<?php include("sidebar.php"); ?>
<?php include("footer.php"); ?>